<template>
	<div class="market">
    <div class="m_content">
        <header>
            <img src="../../static/img/icon_back_n.png" alt="" @click="backhome()">
            <p>商品分类</p>
            <img src="../../static/img/search.png" alt="" @click="sousuo()">
        </header>
        <div class="content">

            <ul class="left">
            
                <li v-for="(item, key) in data.data" @click="change_style(item.category_id,key)" :style="i == item.category_id ? { color: '#fb7d34',fontSize:'0.2rem' } : { color: '#333',fontSize:'0.1562rem' }" style='transition: .5s' >{{ item.category_name }}</li>

            </ul> 

            <ul class="right">

                <li v-for="(item, key) in data.data">

                    <div :id=item.category_id class="kuai" v-for="(market, index) in item.category_list">

                        <p class="m_title" v-show="market.body.category_name != ''"><span>—</span>{{ market.body.category_name }}<span>—</span></p>

                        <div @click="xiangqing()" class="lar_img" v-for="mark in market.body.items" style="float:left;overflow:hidden;" >
                        <router-link :to="'/detail2/'">
                            <img class="l_img" :src="mark.img_url" alt="" :style='{height:market.is_show == "Y" ? 1.15 + "rem" : 0.575 + "rem", width: market.is_show == "Y" ? 2.875 + "rem" : 0.575 + "rem"}' v-show="market.is_show == 'Y'">

                            <img class="m_img" :src="mark.img_url" alt="" :style='{height:market.is_show == "Y" ? 1.15 + "rem" : 0.575 + "rem", width: market.is_show == "Y" ? 2.875 + "rem" : 0.575 + "rem"}' v-show="market.is_show != 'Y'">

                            <p v-if="mark.product_name?true:null" class="img_name">{{ mark.product_name }}</p>
                           </router-link>
                        </div>

                    </div>

                </li>
                <li></li>

            </ul>

        </div>
    </div>
	</div>
</template>

<script type="text/javascript">
	
    import axios from 'axios'

    export default {

        data () {
            return {
                data: [],
                i: 653,
                r_index: 0
            }
        },
        methods : {
            backhome () {
                this.$router.push({path: '/home'});
            },
            sousuo () {
                this.$router.push({path: '/sou'})
            },
            change_style (a, key) {
                this.i = a;
                $('.m_content').scrollTop($('.right .kuai:first-child')[key].offsetTop + 48.3) 
            },
            xiangqing () {
                // this.$router.push({path: '/detail2'})
            },
            classifyMenu(){
                // 判断滚动条的位置来修改左侧导航的样式
                if($('.m_content').scrollTop() >= 48){
                    // if($('.m_content').scrollTop() >= 9036){
                    if($('.m_content').scrollTop() >= 9036){
                        $('.content .left').css({'top':-0.4+'rem'});
                    }else{
                        $('.content .left').css({'top':0.1+'rem'});
                    }
                }else {
                    $('.content .left').css({'top':0.583 +'rem'});
                }
            },
            classifyNav(){
                // 遍历左侧所有logo的数据图片
                for(let count=0; count<$('.right .kuai:first-child').length; count++){
                    //切换样式
                    if(count > 12){//
                        if($('.m_content').scrollTop() >= $('.right .kuai:first-child')[count].offsetTop){
                            this.i = $('.right .kuai:first-child').eq(count).attr('id');
                        }
                    }else if(//判断 滚动条和元素实际位置的区间来进行锁定区域
                        $('.m_content').scrollTop() >= $('.right .kuai:first-child')[count].offsetTop && 
                        $('.m_content').scrollTop() < $('.right .kuai:first-child')[count+1].offsetTop
                        ){
                            // 赋予符合条件的元素的样式
                            this.i = $('.right .kuai:first-child').eq(count).attr('id');
                            // $('.content .left').css({'top':0.1 +'rem'});
                    }
                }
            }
        },
        mounted(){  //页面渲染完成后，监听滚动条scroll事件，执行对应的函数
            $('.m_content').scroll(this.classifyNav);
            $('.m_content').scroll(this.classifyMenu);
        },
        created () {
            axios.get('../static/data/market.json').then(res => {
                this.data = res.data;
            })
        }
    }

</script>

<style type="text/css" scoped lang="less">
	.market{
        position: absolute;
        left: 0;
        right: 0;
        bottom:50px;
        top:0;
        header{
            background-color: #f2f2f2;
            height: 0.483rem;
            img:first-child{
                height: 0.26rem;
                width: 0.26rem;
                position: absolute;
                left: 0.11rem;
                top: 0.11rem;
            }
            p{
                display: inline-block;
                font-size: 0.18rem;
                color: #666;
                position: absolute;
                left: 1.7rem;
                top: 0.11rem;
            }
            img:last-child{
                height: 0.25rem;
                width: 0.3rem;
                position: absolute;
                right: 0.11rem;
                top: 0.11rem;
            }
        }
        .content{
            .left{
                position: fixed;
                left: 0;
                top: 0.583rem;
                bottom: 0.483rem;
                width: 0.9rem;
                margin-right: 0.17rem;
                font-size: 0.15rem;
                overflow-x: scroll;
                text-align: center;
                color: #333;
                transition: top 0.5s;
                li{
                    height: 0.52rem;
                    line-height: 0.52rem;
                }
                .active{
                    color: #fb7d34;
                    font-size: 0.2rem;
                }
            }
            .right{
                position: absolute;
                right: 0.17rem;
                top: 0rem;
                bottom: 0.48rem;
                width: 2.9rem;
                margin-top: 0.483rem;
            }
            .right>li{
                width: 2.89rem;
                overflow: hidden;
                .kuai{
                    .m_title{
                        font-size: 0.17rem;
                        color: #333;
                        text-align: center;
                        width: 2.89rem;
                        height: 0.7555rem;
                        line-height: 0.7555rem;
                        margin-top: 0.12rem;
                        overflow: hidden;
                        span{
                            color: #e0e0e0;
                            display: inline-block;
                        }
                        span:first-child{
                            margin-right: 0.1rem;
                        }
                        span:last-child{
                            margin-left: 0.1rem;
                        }
                    }
                    .lar_img{
                        height: 1.2rem;
                        padding: 0;
                        position: relative;
                        overflow: hidden;
                        .l_img{
                            margin-bottom: 0.4rem;
                        }
                        .m_img{
                            margin: 0rem 0.18rem;
                            position: relative;
                            top: -0.4rem;
                        }
                        .img_name{
                            font-size: 0.14rem;
                            color: rgba(0, 0, 0, 0.54);
                            height: 0.24rem;
                            text-align: center;
                            position: relative;
                            top: -0.5rem;
                        }
                    }  
                }
                .kuai:nth-child(2){
                    .m_title{
                        padding-top: 0.1rem;
                    }
                }
            }
            .right li:last-child{
                height: 3.4rem;
                width: 100%;
            }
        }
    }
    .market .m_content{
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 100%;
        overflow-x: hidden;
    }
</style>